<template>
  <!-- 顶部内容, 书写在这里, 通过传送门(teleporter) 放在顶部内 -->
  <teleport to=".header">
    <SdyHeader title="注册" right="more"/>
  </teleport>

  <div class="register-box">
    <van-steps
      class="step-box"
      :active="activeCount"
      active-icon="success"
      finish-icon="checked"
      active-color="#07c160">
      <van-step>手机号</van-step>
      <van-step>验证码</van-step>
      <van-step>密码</van-step>
      <van-step>完成注册</van-step>
    </van-steps>

    <div v-if="activeCount === 0" class="tel-box">
      <van-form @submit="activeCount = 1">
        <van-cell-group inset>
          <van-field
            v-model="userInfo.tel"
            name="tel"
            autocomplete="off"
            label="手机号"
            placeholder="手机号"
            :rules="[{ validator: testTel, trigger: 'onChange' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button :disabled="disableForTel" round block type="primary" native-type="submit">
            下一步
          </van-button>
        </div>
      </van-form>
    </div>
    <div v-if="activeCount === 1" class="tel-code">
      <van-form @submit="codeHandler">
        <van-cell-group inset>
          <van-field
            v-model="userInfo.telcode"
            center
            clearable
            autocomplete="off"
            label="短信验证码"
            placeholder="请输入短信验证码">
            <template #button>
              <van-button v-if="statusForCodeBtn" @click="sendCodeHandler" size="small" type="primary">发送验证码</van-button>
              <van-button v-else disabled size="small" type="primary">{{ timer }}(s) 以后再次发送</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            下一步
          </van-button>
        </div>
      </van-form>
    </div>
    <div v-if="activeCount === 2" class="tel-pwd">
      <van-form @submit="pwdHandler">
        <van-cell-group inset>
          <van-field
            v-model="userInfo.password"
            name="password"
            label="密码"
            autocomplete="off"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button :disabled="!userInfo.password" round block type="primary" native-type="submit">
            下一步
          </van-button>
        </div>
      </van-form>
    </div>
    <div v-if="activeCount === 3" class="tel-finish">
      <van-icon class="success" name="checked" />
      <span>完成注册</span>
    </div>
  </div>
</template>

<script name="sdyCart" lang="ts" setup>
import SdyHeader from '../../components/header.vue'
import { ref } from 'vue'
import { testTelHanlder, sendCodeHanlder, registerHanlder, testCodeHanlder } from '../../model/users'
import { showFailToast } from 'vant'

// 书写接口
interface User {
  tel: string,
  telcode: string,
  password: string
}

interface ResponseInfo {
  code?: string
  message?: string
  [key: string]: any
}

// 准备变量, 表示步骤条当前的步骤
const activeCount = ref<number>(0)

// 准备一个变量, 表示当前用户注册信息
const userInfo = ref<User>({ tel: '', telcode: '', password: '' })

// 准备一个变量, 表示 手机号部分的按钮禁用
const disableForTel = ref<boolean>(true)

// 表示手机号的表单校验规则
const testTel = async (val: string) => {
  // val 表示你填写的内容

  // 非空验证
  if (!val) return '请填写手机号'

  // 正则验证
  if (!/^\d{11}$/.test(val)) return '请填写合法的手机号'

  // 进行手机号验证
  const res = await testTelHanlder(val)

  // 判断条件 12345654323
  if ((res as unknown as ResponseInfo).code === '10005') return '该手机号已经被注册'
  else {
    disableForTel.value = false
    return true
  }
}

// 准备一个变量, 表示发送验证码按钮的状态
const statusForCodeBtn = ref<boolean>(true)
// 准备一个变量, 表示倒计时秒数
let timer = ref<number>(60)

// 发送验证码
const sendCodeHandler = async () => {
  statusForCodeBtn.value = false

  // 开启定时器
  const time: number = setInterval(() => {
    timer.value--
    // 判断倒计时结束
    if (timer.value <= 0) {
      clearInterval(time)
      statusForCodeBtn.value = true
    }
  }, 1000)

  const res = await sendCodeHanlder(userInfo.value.tel)
  console.log(res)
}

// 验证验证码
const codeHandler = async () => {
  const res = await testCodeHanlder(userInfo.value.tel, userInfo.value.telcode)

  if ((res as unknown as ResponseInfo).code !== '200') {
    // 提示错误
    showFailToast('验证码有误, 请重试')
    return
  }

  // 代码执行到这里, 继续注册
  activeCount.value = 2
}

// 提交密码注册
const pwdHandler = async () => {
  const res = await registerHanlder(userInfo.value.tel, userInfo.value.password)
  if ((res as unknown as ResponseInfo).code !== '200') {
    // 提示错误
    showFailToast('注册失败, 请重试')
    return
  }

  activeCount.value = 3
}

</script>

<style scoped lang="scss">
.register-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  > .step-box {
    width: calc(100% - 30px);
    box-sizing: border-box;
    margin-bottom: 30px;
  }

  > .tel-finish {
    width: 150px;
    height: 150px;
    background-color: #07C160;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;

    > .success {
      font-size: 80px;
      color: #fff;
      margin-bottom: 10px;
    }

    > span {
      font-size: 20px;
      color: #fff;
    }
  }
}
</style>
